<template>
  <div class="rightArea">
    <div class="rightTop">编辑资料</div>

    <div class="rightBottom">
      <!-- information -->
      <div class="information">
        <!-- 头像 -->
        <div class="avatar">
          <el-avatar
            icon="el-icon-user-solid"
            :size="120"
            shape="circle"
            :src="avatar"
            fit="fill"
          ></el-avatar>
        </div>
        <p class="avatar_tip">点击更换</p>

        <!-- 主要内容区域 -->
        <div class="main-form">
          <!-- 内部内容区域 -->
          <div class="whole_form">
            <!-- 一排 -->
            <div class="form-col">
              <div class="form-left">
                <label class="name">用户名: </label>
                <input type="text" class="el_input" />
                <span>0//11</span>
              </div>
              <div class="form-right">
                <label class="name">生日: </label>
                <input type="text" class="el_input" />
              </div>
            </div>
            <!-- 二排 -->
            <div class="form-col">
              <div class="form-left">
                <label class="name">用户名: </label>
                <input type="text" class="el_input" />
                <span>0//11</span>
              </div>
              <div class="form-right">
                <label class="name">生日: </label>
                <input type="text" class="el_input" />
              </div>
            </div>
            <!-- 三排 -->
            <div class="form-col">
              <div class="form-left">
                <label class="name">性别: </label>
                <input type="text" class="el_input" />
               <input type="text">
              </div>
              <div class="form-right">
                <label class="name">生日: </label>
                <input type="text" class="el_input" />
              </div>
            </div>

            <div class="saveBtn">
              <button class="btn"></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import avatar from "@/assets/09.jpg";
export default {
  data() {
    return {
      avatar: avatar,
    };
  },
};
</script>

<script setup lang="ts"></script>

<style scoped lang="less">
//右侧
.rightArea {
  width: 1020px;
  height: 875px;
  margin-left: 10px;

  .rightTop {
    width: 1020px;
    height: 72px;
    line-height: 72px;
    color: #111;
    font-size: 14px;
    padding-left: 45px;
    box-sizing: border-box;
    background-color: #fff;
    margin-bottom: 10px;
  }

  .rightBottom {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding-top: 30px;
    .information {
      width: 960px;
      height: 541px;
      padding: 30px;
      margin-top: 10px;
      background-color: pink;
      // 头像
      .avatar {
        text-align: center;
      }
      .avatar_tip {
        text-align: center;
        margin-top: 3px;
      }

      // 表格区
      .main-form {
        width: 680px;
        height: 295px;
        padding: 30px 140px;
        background: #fddd9b;
        .whole_form {
          width: 680px;
          height: 295px;
          background-color: aqua;
        }
      }
    }
  }
}
</style>
